<!DOCTYPE html>
<html lang="en">
<head>
    <title>My BCIT Project</title>
    <meta name="comp1800 template" content="My 1800 App">

    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap Library CSS CDN go here -->
    
    <!-- Other libraries go here -->

    <!-- Link to styles of your own -->
    <!-- <link rel="stylesheet" href="./styles/style.css"> -->

</head>

<body>
  

    <script src="scripts/script.js"></script>
        <main>
          
            <div id="myCarousel" class="carousel slide mb-6" data-bs-ride="carousel">
              <div class="carousel-inner">
                <div class="carousel-item active">
                  <div class="container">
                    <div class="carousel-caption text-start">
                      <img src="images/logo1.png" height="50px">
                      <h1>
                       Pick a car
                      </h1>
                      <p class="opacity-75">Choose a high-quality car for oneself and others</p>
                      <img src="images/Screenshot_139.png">
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- Marketing messaging and featurettes
            ================================================== -->
            <!-- Wrap the rest of the page in another container to center all the content. -->
            <div class="container marketing">
              <!-- Three columns of text below the carousel -->
              <div class="row">
                <div class="col-lg-4">
                  <h2 class="fw-normal">
                   1. Login</h2>
                  <p>Log in to the car sales platform app first</p>
                  <img src="images/Screenshot_140.png">
                  <img src="images/Screenshot_144.png">
                </div><!-- /.col-lg-4 -->
                <div class="col-lg-4">
                  <h2 class="fw-normal">
                   2. Search for</h2>
                  <p>Then search for the car products you want to see</p>
                  <img src="images/Screenshot_146.png">
                  <img src="images/Screenshot_145.png">
                </div><!-- /.col-lg-4 -->
                <div class="col-lg-4">
                  <h2 class="fw-normal">
                   3. Pick</h2>
                    <!------------------------------>
                   <!-- Your HTML Layout go here -->
                   <!------------------------------>
                   <!-- Stuff for body goes here -->
                   <div class="container">
                    <button class="btn btn-outline-warning" onclick="myHelloFunction()" type="button">click</button>
                </div>
            
                <!---------------------------------------------->
                <!-- Your own JavaScript functions go here    -->
                <!---------------------------------------------->
            
                <!-- Link to scripts of your own -->
                <script src="./scripts/script.js"></script>
                  <p>Then you can pick and select the car you like</p>
                  <img src="images/Screenshot_142.png ">
                  <img src="images/Screenshot_143.png">
                </div><!-- /.col-lg-4 -->
              </div><!-- /.row -->
            <!-- FOOTER -->
            <div class="container">
              <footer class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top">
                <p class="col-md-4 mb-0 text-body-secondary">&copy; 2024 Company, Inc</p>
                <a href="/" class="col-md-4 d-flex align-items-center justify-content-center mb-3 mb-md-0 me-md-auto link-body-emphasis text-decoration-none">
                  <svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
                </a>
              </footer>
            </div>
            <div class="b-example-divider"></div>
          </main>
    </body>
</html>